.buy-input {
  .buy-input-top-row {
    display: inline-flex;
    justify-content: space-between;
    font-size: 1.4rem;
  }
  .InputSection-static-input {
    font-size: var(--font-lg);
  }

  &.Exchange-swap-section {
    min-height: 9.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .TokenSelector-box {
      display: flex;
      align-items: center;
      border-radius: 0.4rem;
      color: var(--color-white);
      min-width: 4.65rem;
      font-size: 2.1rem;
      line-height: 2.5rem;
      justify-content: flex-end;

      &:hover {
        color: var(--color-blue-300);
      }

      &-symbol {
        margin-left: 0.8rem;
      }
    }

    .Exchange-swap-input-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .Exchange-swap-max {
      position: unset;
      color: var(--color-white);
      font-size: var(--font-sm);
    }

    .TokenSelector-caret {
      margin: 0;
      margin-right: -0.5rem;
    }

    .PositionEditor-token-symbol {
      display: flex;
      align-items: center;
      margin-left: 1rem;
      gap: 0.5rem;
    }

    &-top {
      padding-bottom: 0;
    }

    .selected-token {
      display: flex;
      align-items: center;
    }
  }
}

.PercentSelector {
  position: absolute;
  display: flex;
  list-style: none;
  border-radius: var(--border-radius-sm);
  padding: 0;
  background: linear-gradient(270deg, rgba(49, 54, 85, 0.9) 0%, rgba(37, 40, 65, 0.9) 100%);
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25);
  margin-top: -2rem;
  backdrop-filter: blur(7px);

  .PercentSelector-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    width: 4.5rem;
    text-align: center;
    font-size: 1.4rem;

    &:hover {
      background: var(--color-cold-blue-900);
    }
  }
}
